<script lang="ts" setup>
import type { Carousel01Item } from '@/api/designer/model'
import type { OpenCallbackMeta } from '@/components/JumpLinkModal/type'
import AddButton from '@/components/AddButton/AddButton.vue'
import BlockOpts from '@/components/CompAttr/BlockOpts.vue'
import ContainerMask from '@/components/CompAttr/ContainerMask.vue'
import { type Carousel01ComponentMeta, JumpType, JumpTypeMap } from '@/definitions/type'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useUpload } from '@/hooks/useUpload'
import { useDesignStore } from '@/stores'
import { removeItem, sortItem } from '@/utils/helper'
import { Input, Popconfirm } from 'ant-design-vue'
import { computed, ref } from 'vue'

defineOptions({
  name: 'Carousel01Attr',
  inheritAttrs: true,
})

const designStore = useDesignStore()
const activeRender = computed<Nullable<Carousel01ComponentMeta>>(() => designStore.activeRender)

const editItem = ref<Nullable<Carousel01Item>>(null)
const { uploadAction } = useUpload({
  successHandler({ url }) {
    if (!activeRender.value) 
      return
    if (editItem.value) {
      editItem.value.picture = url
    }
    else {
      activeRender.value.config.items!.push(createCarousel01Item(url))
    }
  },
  finallyHandler() {
    editItem.value = null
  },
})
function handleUpdatePicture(item: Carousel01Item) {
  editItem.value = item
  uploadAction()
}
function createCarousel01Item(picture: string): Carousel01Item {
  return {
    picture,
    description: '',
    jumpValue: '',
    title: '',
    // @ts-ignore
    jumpType: JumpType.None,
    // sort 默认和索引同步
    sort: 0,
    jumpTitle: '',
    jumpUrl: '',
  }
}
function handleRemoveItem(item: Carousel01Item) {
  if (!activeRender.value) 
    return
  removeItem(activeRender.value.config.items!, l => l.picture === item.picture)
}
function handleSort(item: Carousel01Item, type: 'up' | 'down') {
  sortItem(activeRender.value!.config.items!, l => l.picture === item.picture, type)
}

const { JumpLinkModalRef } = useCompRefs()
const currentJumpItem = ref<Nullable<Carousel01Item>>()
function handleChooseJumpLink(item: Carousel01Item) {
  if (JumpLinkModalRef.value) {
    currentJumpItem.value = item
    JumpLinkModalRef.value.open({
      jumpType: item.jumpType,
      jumpTitle: item.jumpTitle,
      jumpUrl: item.jumpUrl,
      jumpValue: item.jumpValue,
    }, chooseJumpCallback)
  }
}
function handleRemoveItemJumpLink(item: Carousel01Item) {
  item.jumpType = JumpType.None as any
  item.jumpTitle = ''
  item.jumpUrl = ''
  item.jumpValue = ''
}
function chooseJumpCallback(meta: OpenCallbackMeta) {
  if (activeRender.value && currentJumpItem.value && meta.applied) {
    const index = activeRender.value.config.items!.findIndex(l => l.picture === currentJumpItem.value!.picture)
    if (~index) {
      activeRender.value.config.items![index] = {
        ...activeRender.value.config.items![index],
        ...meta.value,
      }
    }
  }
  currentJumpItem.value = null
}
</script>

<template>
  <div v-if="activeRender">
    <div class="title-label">
      图片内容
    </div>
    <!-- 图片列表 -->
    <div class="flex flex-col w-full gap-3">
      <!-- item for loop -->
      <div v-for="(item, index) in activeRender.config.items" :key="item.picture" class="relative w-full pr-8">
        <!-- 灰色块 -->
        <div class="block-item">
          <div class="block-left">
            <img :src="item.picture" :width="114" :height="64" class="block w-114px h-64px">
            <ContainerMask class="block-left-mask" @click="handleUpdatePicture(item)" />
          </div>
          <div class="block-right">
            <div class="block-right-item">
              <div class="block-right-item-label">
                标题
              </div>
              <Input v-model:value="item.title" placeholder="图片标题" style="flex: 1;" />
            </div>
            <div class="block-right-item">
              <div class="block-right-item-label">
                链接
              </div>
              <!-- CASE: 未选择链接 -->
              <div v-if="(item.jumpType as any) === JumpType.None" class="cursor-pointer text-primary-app text-sm flex items-center" @click="handleChooseJumpLink(item)">
                选择跳转到的页面<i
                  class="i-ant-design:right-outlined w-4 h-4 ml-1"
                />
              </div>
              <!-- CASE: 已选择链接 -->
              <div v-else class="flex-1 flex flex-row items-center">
                <div class="flex-1 w-0 truncate text-main-app text-sm">
                  {{ JumpTypeMap.get(item.jumpType as any) }} | {{ item.jumpTitle }}
                </div>
                <i class="i-ant-design:edit-outlined w-4 h-4 cursor-pointer text-primary-app flex-none" @click="handleChooseJumpLink(item)" />
                <Popconfirm ok-text="确定" cancel-text="取消" title="确定要删除该链接吗?" placement="left" @confirm="handleRemoveItemJumpLink(item)">
                  <i class="i-ant-design:delete-outlined w-4 h-4 cursor-pointer text-primary-app flex-none" />
                </Popconfirm>
              </div>
            </div>
          </div>
        </div>
        <!-- 灰色块操作 -->
        <BlockOpts
          :item="item" :disabled-up="index === 0" :disabled-down="index === activeRender.config.items!.length - 1"
          @remove="handleRemoveItem"
          @sort="handleSort"
        />
      </div>
    </div>
    <!-- 添加图片按钮 -->
    <AddButton @click="uploadAction">
      添加图片
    </AddButton>
  </div>
</template>

<style lang="less" scoped>
.title-label {
    color: var(--app-text-color-main);
    margin-bottom: 14px;
    @apply text-sm font-700;
}

.block-item {
    background: #FAFAFF;
    @apply flex flex-row items-center gap-10px p-14px box-border rounded;

    .block-left {
        width: 114px;
        height: 64px;
        @apply rounded overflow-hidden relative flex-none;

        &:hover .block-left-mask {
            @apply opacity-100;
        }
    }

    .block-right {
        @apply flex-1 w-0 flex flex-col gap-10px justify-center;

        .block-right-item {
            @apply flex flex-row items-center gap-2;
        }

        .block-right-item-label {
            color: var(--app-text-color-main);
            @apply text-sm flex-none;
        }
    }
}
</style>
